<template>
  <div>
    <Card>
      <TypographyTitle :level="5">追踪列表</TypographyTitle>
      <FormItem name="queryOrder" label="排序依据">
        <Select
          v-model:value="queryOrder"
          placeholder="请选择"
          :options="queryOrderOptions"
          @change="onOrderChange"
          style="width: 170px"
        >
        </Select>
      </FormItem>
      <List item-layout="vertical" :data-source="dataSource" :pagination="false">
        <template #renderItem="{ item }">
          <ListItem>
            <ListItemMeta>
              <template #title>
                <Tooltip placement="topLeft" :title="item.title">
                  <a @click="handleChart(item)"
                    ><div
                      :style="{
                        maxWidth: '200px',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                      }"
                    >
                      <TypographyText type="warning" v-if="item.isError">{{ item.title }}</TypographyText>
                      <template v-if="!item.isError">{{ item.title }}</template>
                    </div></a
                  ></Tooltip
                >
              </template>
            </ListItemMeta>
            <Tag color="#108ee9">{{ item.duration + ' ms' }}</Tag>
            <Divider type="vertical" />
            <TypographyText type="secondary">{{ item.start }}</TypographyText>
          </ListItem>
        </template>
      </List>
      <br />
      <Pagination size="small" v-model:current="current" :total="total" v-model:page-size="pageSize" />
    </Card>
  </div>
</template>
<script lang="ts" setup>
import {
  List,
  ListItem,
  ListItemMeta,
  FormItem,
  Select,
  TypographyTitle,
  Divider,
  Tag,
  Card,
  TypographyText,
  Pagination,
  Tooltip,
} from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';
import { getBasicTraces } from '/@/api/maintenance-center/skywalking/trace/trace';
const total = ref();
const current = ref();
const pageSize = ref(8);
const queryOrder = ref('BY_START_TIME');
const queryOrderOptions = ref([
  { label: '开始时间', value: 'BY_START_TIME' },
  { label: '持续时间', value: 'BY_DURATION' },
]);
let navigationParam = reactive({
  endpointId: '',
  maxTraceDuration: 0,
  minTraceDuration: 0,
  paging: {
    pageNum: 1,
    pageSize: 10,
  },
  queryDuration: {
    end: '',
    start: '',
    step: '',
  },
  queryOrder: '',
  serviceId: '',
  serviceInstanceId: '',
  tags: [
    {
      key: '',
      value: '',
    },
  ],
  traceId: '',
  traceState: '',
});
const dataSource = ref([]);
const emit = defineEmits(['getChart']);
const onOrderChange = async () => {
  if (dataSource.value.length != 0) {
    current.value = 1;
    navigationParam.paging.pageNum = current.value;
    navigationParam.queryOrder = queryOrder.value;
    if (navigationParam.queryDuration.start == '' || navigationParam.queryDuration.start == undefined) {
      let navRes = await getBasicTraces(navigationParam);
      dataSource.value = navRes;
      total.value = dataSource.value.length;
      dataSource.value = dataSource.value.slice((current.value - 1) * pageSize.value, current.value * pageSize.value);
      emit('getChart');
    }
  }
};

const setList = async (searchFormParams) => {
  current.value = 1;
  navigationParam = searchFormParams;
  navigationParam.paging.pageNum = current.value;
  navigationParam.queryOrder = queryOrder.value;
  if (navigationParam.queryDuration.start !== '' && navigationParam.queryDuration.start !== undefined) {
    let navRes = await getBasicTraces(navigationParam);
    dataSource.value = navRes;
    total.value = dataSource.value.length;
    dataSource.value = dataSource.value.slice((current.value - 1) * pageSize.value, current.value * pageSize.value);
  } else {
    dataSource.value = [];
    total.value = 0;
    current.value = 1;
  }
  watch(current, async () => {
    if (dataSource.value.length !== 0) {
      let navRes = await getBasicTraces(navigationParam);
      dataSource.value = navRes;
      total.value = dataSource.value.length;
      dataSource.value = dataSource.value.slice((current.value - 1) * pageSize.value, current.value * pageSize.value);
    }
  });
};

const clearList = () => {
  dataSource.value = [];
  total.value = 0;
  current.value = 1;
  emit('getChart');
};

const handleChart = (record) => {
  emit('getChart', record);
};
defineExpose({ setList, clearList });
</script>
<style lang="less">
.ant-pagination {
  float: right;
}
</style>
